<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/Underline.css"/>
		<link rel="stylesheet" type="text/css" href="css/animation.css" />
		<link rel="stylesheet" type="text/css" href="css/MainOrderProduct.css"/>
		<link rel="stylesheet" href="css/downCake.css" /> 
		<style type="text/css">
			*{
				margin: 0px;padding: 0px;
			}
			.nav{
				width: 1848px;height: 120px;
				background: #faf4f6;
			}
			.nav img{
				position: absolute;
				width: 180px;height: 120px;				
				left: 170px;right: 0;
			}
			.font_left{
				position: absolute;
				cursor: default;
				font-family: "微软雅黑";
				font-size: 32px;
				font-weight: 800;
				color: #f13a3a;
				left: 290px;top: 35px;
			}
			.font_right{
				position: absolute;
				cursor: default;
				font-family: "微软雅黑";
				font-weight: 800;
				font-size: 32px;
				color: #cccccc;
				left: 360px;top: 35px;								
			}
			.nav_title{                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
				list-style: none;						
			}
			.nav_title li{				
				position: relative;display:inline-block;			/*运用了px这里有一个问题当页面缩放的时候字体也会跟着动.*/
				cursor: pointer;
				font-family: "HYLeMiaoTiJ";
				font-size: 20px;
				margin-top: 50px;
				margin-left: 60px;				
				left: 300px;									
			}
			.nav_title li a{
				text-decoration: none;
				color: #000000;
			}			
			.nav_title li a:hover{							
				color: red;
			}
			
			.dropbtn{
            	background-color: #faf4f6;
            	color: #000000;
      			border: none;
            	cursor: pointer;
        	}
        	.dropdown-content{
            	display: none; 	
            	position: absolute;
            	z-index: 997;
            	background-color: #f6f6f6;
            	border: 1px solid #CCCCCC;           	
            	left: -135px;
            	margin-right: 200px;
            	box-shadow:  0px 8px 16px 0px rgba(0,0,0,0.2);
            	
           		/*transform: scaleY(0);
            	transition:all 6s;*/			/*动画效果出不来*/
       		}
       		.dropdown-content a{
           		 color: #000000;
           		 width: 295px;height: 200px;
           		 text-decoration: none;
            	 display: block;
        	}
        	.nav_title li:hover .dropdown-content{
            		display: block; 	!important
            		/*transform: scaleY(2);*/
       		 }
       		
			#shoppingcar{		
				width: 160px;height: 50px;
				border: 1px solid #CCCCCC;
				opacity: 1;
				text-align: center;
				font-size: 13px;
				line-height: 50px;
			}
			#shoppingcar_left{
				position: absolute;
				width: 40px;height: 30px;
				left: 4px;top: -3px;
			}
			#shoppingcar_right{
				position: absolute;
				width: 25px;height: 20px;
				left: 126px;top: 4px;
			}
			
			.people_content{
				position: relative;
				margin-top: 32px;
				width: 1848px;height: 1000px;
				border: 0px dashed red;
				background: #FFFFFF;		  	 /* 粉红背景*/
			}
			.people_content .font_up{
				padding: 165px 0 0 250px;
				color: red;
				font-size: 25px;font-weight: 600;font-family: '微软雅黑';
			}
			.people_content .font_content{
				margin: 1px 0 0 250px;
				color: #999999;
				font-size: 25px;font-weight: 600;font-family: '微软雅黑';
			}
			.people_content .font_down{
				color: #666666;
				margin: 15px 0 0 250px;
				font-size: 15px;
				font-family: "微软雅黑";
			}
			.people_content .article{
				width: 400px;height: 200px;
				border: 0px solid cyan;
				margin: 60px 0 0 250px; 
			}
			.people_content .article span{
				color: red;
				font-family: "微软雅黑";
				line-height: 26px;
			}
			.people_content .rphoto{
				position: absolute;
				left: 800px;top: 187px;
			}
			.people_content .lphoto{
				position: absolute;
				left: 1300px;top: 187px;
			}
			.people_content_next{
				width: 1848px;height: 400px;
				border: 0px dashed red;				/**/
				background: #FFFFFF;				/*青色背景*/
			}
			#left{
				float: left;
				width: 260px;height: 350px;
				border: 0px solid purple;		/*left边框*/
				margin: 40px 0 0 250px;	
			}
			#left_top  a img{
				margin-left: 20px;
				border: 10px solid pink;
				border-radius:50%;				
			}
			#left_top a{
				text-decoration: none;
			}
			#left_top_row1{
				margin: 10px 0 0 75px;
				color: #000000;
			}
			#left_top_row2{
				margin: 10px 0 0 0;				
				color: #000000;
				font-size: 15px;
				font-family: "微软雅黑";
			}
			#left_top_row3{
				margin: 20px 0 0 110px;
				color: red;
			}
			#center{
				float: left;
				width: 260px;height: 350px;
				border: 0px solid purple;  	/*center*/
				margin: 40px 0 0 110px;	
			}
			#center_top  a img{
				margin-left: 20px;
				border: 10px solid pink;
				border-radius:50%;				
			}
			#center_top a{
				text-decoration: none;
			}
			#center_top_row1{
				margin: 10px 0 0 80px;
				color: #000000;
			}
			#center_top_row2{
				margin: 10px 0 0 0;				
				color: #000000;
				font-size: 15px;
				font-family: "微软雅黑";
			}
			#center_top_row3{
				margin: 20px 0 0 110px;
				color: red;
			}
			#right{
				float: left;
				width: 260px;height: 350px;
				border: 0px solid purple; 	/*right*/
				margin: 40px 0 0 110px;	
			}
			#right_top  a img{
				margin-left: 20px;
				border: 10px solid pink;
				border-radius:50%;				
			}
			#right_top a{
				text-decoration: none;
			}
			#right_top_row1{
				margin: 10px 0 0 85px;
				color: #000000;
			}
			#right_top_row2{
				margin: 10px 0 0 0;				
				color: #000000;
				font-size: 15px;
				font-family: "微软雅黑";
			}
			#right_top_row3{
				margin: 20px 0 0 110px;
				color: red;
			}
			#squar_font{
				float: left;
				width: 260px;height: 350px;
				background: #f5f5f5;
				border: 0px solid purple; /*font*/
				margin: 40px 0 0 143px;	
			}
			#squar_font table td {
				font-family: "微软雅黑";
				color: #8a8a8a;
			}
			
			#squar_font table td a{
				font-family: "微软雅黑";
				color: #8a8a8a;
				text-decoration: none;
			}
			#squar_font table td img{
				margin-left: 20px;
			}			
			#squar_font p{
				font-family: "微软雅黑";
				color: #8a8a8a;
				margin-left: 18px;
				margin-top: 20px;
			}
			.people_content_next_two{  /*2*/
				width: 1848px;height: 1950px;
				background: #eeedeb;
				background-image: url(img/bj.jpg) ;
				opacity: 1;
			}
			.content_title{
				position: relative;
				width: 600px;height: 120px;
				border: 3px solid #999999;
				margin: 0 auto;
				top: 85px;
			}
			.content_title p{
				font-family: "微软雅黑";
				font-size: 40px;
				text-align: center;
				line-height: 110px;
			}
			
			
			.people_content_next_three{	/*3*/
				width: 1848px;height: 1150px;
				background: #FFFFFF;
			}	
			.people_content_next_three .photo_up{
				position: relative;
				top: 150px;
				width: 1300px;height: 410px;
				border: 0px solid cyan;
				margin: 0 auto;
			}
			.people_content_next_three .photo_up .one{
				width: 300px;height: 400px;
				border: 0px solid #00FFFF;
				margin-left: 20px;
			}
			.people_content_next_three .photo_up .two{
				width: 300px;height: 400px;
				border: 0px solid #00FFFF;
				margin-left: 20px;
			}
			.people_content_next_three .photo_up .three{
				width: 300px;height: 400px;
				border: 0px solid #00FFFF;
				margin-left: 20px;
			}
			.people_content_next_three .photo_up .four{
				width: 300px;height: 400px;
				border: 0px solid #00FFFF;
				margin-left: 20px;
			}
			
			.people_content_next_three .photo_down{
				position: relative;
				top: 200px;
				width: 1300px;height: 410px;
				border: 0px solid cyan;
				margin: 0 auto;
			}
			.people_content_next_three .photo_down .five{
				width: 300px;height: 400px;
				border: 0px solid #00FFFF;
				margin-left: 20px;
			}
			.people_content_next_three .photo_down .six{
				width: 300px;height: 400px;
				border: 0px solid #00FFFF;
				margin-left: 20px;
			}
			.people_content_next_three .photo_down .seven{
				width: 300px;height: 400px;
				border: 0px solid #00FFFF;
				margin-left: 20px;
			}
			.people_content_next_three .photo_down .eight{
				width: 300px;height: 400px;
				border: 0px solid #00FFFF;
				margin-left: 20px;
			}
		
		
			.people_bottom{
				width: 1848px;height: 600px;
				background: #222324;
			}
			.people_bottom .bottom_photo{
				position: relative;
				top: 10px;
				margin: 0 auto;
				width: 1840px;height: 300px;
				border: 0px solid cyan;
			}
			.bottom_photo_1{
				margin-top: 90px;
				margin-left: 275px;
				width: 160px;height: 120px;
				border: 0px solid pink;
				text-align: center;     	/*图片的居中*/
			}
			.bottom_photo_1 p{
				color: #93989d;
				margin-top: 4px;
			}
			.bottom_photo_2{
				margin-top: 90px;
				margin-left: 145px;
				width: 160px;height: 120px;
				border: 0px solid pink;
				text-align: center;     	/*图片的居中*/
			}
			.bottom_photo_2  p{
				color: #93989d;
				margin-top: 6px;
			}
			.erweima img{
				margin: 70px 0 0 120px;
			}
			.bottom_photo_3{
				margin-top: 90px;
				margin-left: 120px;
				width: 160px;height: 120px;
				border: 0px solid pink;
				text-align: center;     	/*图片的居中*/
			}
			.bottom_photo_3  p{
				color: #93989d;
				margin-top: 6px;
			}
			.bottom_photo_4{
				margin-top: 90px;
				margin-left: 130px;
				width: 160px;height: 120px;
				border: 0px solid pink;
				text-align: center;     	/*图片的居中*/
			}
			.bottom_photo_4  p{
				color: #93989d;
				margin-top: 6px;
			}
			.copyright{
				margin-top: 80px;
				color: #93989d;
				text-align: center;
			}
			
			#a a{
				color: red;
			}
			#a a:after{
				content: "";
				position: absolute;
				top: 32px;left: -5px;
				width: 45px;
				border: 2px solid red;
				border-radius: 15%;
			}		/* 只是站位,以后有待改进*/
			.R_right{
				position: fixed;
				right: -10px;
				width: 70px;height: 100%;
				border: 0px solid #CCCCCC;
				background: #202020;
				opacity: 1;
				z-index: 999;
			}
			.R_right .border_1{
				margin-top: 150px;
				width: 58px;height: 50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_1 img{
				margin: 10px 0 0 17px;
			}
			.R_right .border_1:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_1{
				background: #202020;
				width: 120px;height: 51px;
				position: absolute;
				left: -170px;
				top: 150px;
				opacity: 0;
				display: none;
			}
			.up_border_1:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #202020;

				position: absolute;

				bottom:10px;

				left:120px;

			
			}
			.border_1:hover .up_border_1{
				display:block;
			}
			.up_border_1 .p_right_1{
				text-align: center;
				line-height: 50px;
			
			}
			.up_border_1 .p_right_1 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.R_right .border_2{
				margin-top: 25px;
				width: 58px;height: 50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_2 img{
				margin: 12px 0 0 17px;
			}
			.R_right .border_2:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_2{
				background: #202020;
				width: 120px;height: 51px;
				position: absolute;
				left: -170px;
				top: 225px;
				opacity: 0;
				display: none;
			}
			.up_border_2:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #202020;

				position: absolute;

				bottom:10px;

				left:120px;

			
			}
			.border_2:hover .up_border_2{
				display:block;
			}
			.up_border_2 .p_right_2{
				text-align: center;
				line-height: 50px;
			
			}
			.up_border_2 .p_right_2 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.R_right .border_3{
				width: 58px;height:180px;   /*字会动是因为width在变，字体设置的是text-align: center;*/
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_3 img{
				margin: 12px 0 0 17px;
			}
			.R_right .border_3:hover{
				width: 60px;height: 180px;
				border: 0px solid pink;
				background: red;
			}
			.R_right .R_right_button{
				margin-top: 15px;
				margin-left: 19px;
				width: 20px;
				background: #c40000;
				text-align: center;
				color: #FFFFFF;
				border: 1px solid pink;
				border-radius: 50%;
			}
			
			.R_right .border_4{
				margin-top: 240px;
				width: 58px;height:50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_4 img{
				margin: 11px 0 0 14px;
			}
			.R_right .border_4:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_4{
				background: #202020;
				width: 120px;height: 51px;
				position: absolute;
				left: -170px;
				top: 709px;
				opacity: 0;
				display: none;
			}
			.up_border_4:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #202020;

				position: absolute;

				bottom:10px;

				left:120px;

			
			}
			.border_4:hover .up_border_4{
				display:block;
			}
			.up_border_4 .p_right_4{
				text-align: center;
				line-height: 50px;
			
			}
			.up_border_4 .p_right_4 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.R_right .border_5{
				margin-top: 5px;
				width: 58px;height:50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_5 img{
				margin: 11px 0 0 14px;
			}
			.R_right .border_5:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_5{
				background: #FFFFFF;
				width: 180px;height: 180px;
				position: absolute;
				left: -230px;
				top: 634px;
				opacity: 0;
				display: none;
				box-shadow:  0px 8px 16px 10px rgba(0,0,0,0.2);
			}
			.up_border_5:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #FFFFFF;

				position: absolute;

				bottom:10px;

				left:180px;

			
			}
			.border_5:hover .up_border_5{
				display:block;
			}
			.up_border_5 .p_right_5{
				text-align: center;
				line-height: 28px;
				font-family: "微软雅黑";
			
			}
			.up_border_5 .p_right_5 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.R_right .border_6{
				margin-top: 10px;
				width: 58px;height: 50px;
				border: 0px solid pink;
				background: #202020;
			}
			.R_right .border_6 img{
				margin: 10px 0 0 14px;
			}
			.R_right .border_6:hover{
				width: 60px;height: 50px;
				border: 0px solid pink;
				background: red;
			}
			.up_border_6{
				background: #202020;
				width: 120px;height: 51px;
				position: absolute;
				left: -170px;
				top: 824px;
				opacity: 0;
				display: none;
			}
			.up_border_6:after{	
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #202020;

				position: absolute;

				bottom:10px;

				left:120px;

			
			}
			.border_6:hover .up_border_6{
				display:block;
			}
			.up_border_6 .p_right_6{
				text-align: center;
				line-height: 50px;
			
			}
			.up_border_6 .p_right_6 a{
				text-decoration: none;
				color: #FFFFFF;
			}
			
			.denglu_1{
				width: 300px;height: 280px;
				background: #FFFFFF;
				position: absolute;
				left: -300px;top: 150px;
				box-shadow: 0px 8px 16px 10px rgba(0,0,0,0.2);
				display: none;
				opacity: 1;
				z-index: 998; 				
			}
			/*.border_1:hover .denglu{
				display: block;
			}*/
			.denglu_1:after{
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #FFFFFF;

				position: absolute;

				top: 10px;

				left:300px;
		
			}
			
			.denglu_2{
				width: 300px;height: 280px;
				background: #FFFFFF;
				position: absolute;
				left: -300px;top: 225px;
				box-shadow: 0px 8px 16px 10px rgba(0,0,0,0.2);
				display: none;
				opacity: 1;
				z-index: 998; 				
			}
			/*.border_2:hover .denglu{
				display: block;
			}*/
			.denglu_2:after{
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #FFFFFF;

				position: absolute;

				top: 10px;

				left:300px;
		
			}
			
			.denglu_3{
				width: 300px;height: 280px;
				background: #FFFFFF;
				position: absolute;
				left: -300px;top: 288px;
				box-shadow: 0px 8px 16px 10px rgba(0,0,0,0.2);
				display: none;
				opacity: 1;
				z-index: 998; 				
			}
			/*.border_3:hover .denglu{
				display: block;
			}*/
			.denglu_3:after{
				content: '';

				width: 0;

				height: 0;

				border-width: 15px;

				border-style: solid;

				border-color: transparent transparent transparent #FFFFFF;

				position: absolute;

				top: 10px;

				left:300px;
		
			}
			.denglu_font{
				font-family: "微软雅黑";
				margin: 20px 0 0 20px;
			}
			#name{
				width: 220px;height: 35px;
				margin: 10px 0 0 20px;
			}
			#password{
				width: 220px;height: 35px;
				margin: 15px 0 0 20px;
			}
			#button{
				width: 225px;height: 35px;
				margin: 20px 0 0 20px;
				font-family: "微软雅黑";
				font-size: 15px;
				color: #FFFFFF;
				background: #f13a3a;
				border: 0;
			}
			.denglu_font1{
				font-family: "微软雅黑";
				font-size: 15px;
				margin: 5px 0 0 180px;
			}
			.denglu_font1 a{
				text-decoration: none;
				color: #CCCCCC;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		
		<script>
			$(document).ready(function(){
				$(".border_1").mouseenter(function(){		
					$('.up_border_1').animate({
 						left: '-120px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_1").mouseleave(function(){		
					$('.up_border_1').animate({
   						left: '-170px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
								});
				});
				
				$(".border_2").mouseenter(function(){		
					$('.up_border_2').animate({
 						left: '-120px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_2").mouseleave(function(){		
					$('.up_border_2').animate({
   						left: '-170px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
								});
				});
				
					$(".border_4").mouseenter(function(){		
					$('.up_border_4').animate({
 						left: '-120px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_4").mouseleave(function(){		
					$('.up_border_4').animate({
   						left: '-170px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
								});
				});
				
				$(".border_5").mouseenter(function(){		
					$('.up_border_5').animate({
 						left: '-180px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_5").mouseleave(function(){		
					$('.up_border_5').animate({
   						left: '-230px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
						});
				});
				
					$(".border_6").mouseenter(function(){		
					$('.up_border_6').animate({
 						left: '-120px',
  						opacity: 1,
 						}, 900, function() {
	  			// Animation complete.
								});
				});
				$(".border_6").mouseleave(function(){		
					$('.up_border_6').animate({
   						left: '-170px',
						opacity: 0,
   						}, 0, function() {
	  			// Animation complete.
								});
				});
				
				$(".border_1").click(function(){
					$(".denglu_2").css("display","none");
					$(".denglu_3").css("display","none");
					$(".denglu_1").toggle('slow',function(){						
					});					
				});
				
				$(".border_2").click(function(){
					$(".denglu_1").css("display","none");
					$(".denglu_3").css("display","none");
					$(".denglu_2").toggle('slow',function(){
					});
				});
				
				$(".border_3").click(function(){
					$(".denglu_1").css("display","none");
					$(".denglu_2").css("display","none");
					$(".denglu_3").toggle('slow',function(){
					});
				});
//				$(".border_1").click(function(){		
//					$('.denglu').animate({
//						opacity: 1,
// 						}, 1000, function() {
//	  			// Animation complete.
//								});
//				});
				
				$(".border_6").click(function(){
					$("html,body").stop().animate({
						'scrollTop':0
					});
				});
				
			});
		</script>
	</head>
	<body>
		<div class="people">
			<div class="R_right">
				<div class="border_1">
					<img src="img/caketb2.png" width="27px"height="30px"/>
					<div class="up_border_1"><p class="p_right_1"><a href="#">我的资料</a></p></div>
				</div>
				<div class="denglu_1">
					<p class="denglu_font">请登录</p>
					<div style="border: 1px solid red;margin:0 0 0 12px;width: 65px;display: inline-block"></div>
					<div style="border: 1px solid #CCCCCC;margin:0 0 0 -5px;width: 190px;display: inline-block"></div>
					<input type="text" name="用户名" id="name" placeholder="       请输入用户名" style="background-image:url(img/inputname.jpg) ;"/>
					<input type="password" name="密码" id="password"  placeholder="请输入密码"/>
					<input type="button" id="button" value="登录"/>
					<p class="denglu_font1"><a href="#">免费注册></a></p>
				</div>
				
				<div class="border_2">
					<img src="img/caketb3.png" width="27px"height="25px"/>
					<div class="up_border_2"><p class="p_right_2"><a href="#">我的收藏</a></p></div>
				</div>
				<div class="denglu_2">
					<p class="denglu_font">请登录</p>
					<div style="border: 1px solid red;margin:0 0 0 12px;width: 65px;display: inline-block"></div>
					<div style="border: 1px solid #CCCCCC;margin:0 0 0 -5px;width: 190px;display: inline-block"></div>
					<input type="text" name="用户名" id="name" placeholder="请输入用户名" />
					<input type="password" name="密码" id="password"  placeholder="请输入密码"/>
					<input type="button" id="button" value="登录"/>
					<p class="denglu_font1"><a href="#">免费注册></a></p>
				</div>
				
				<hr style="border: 1px solid #181819; margin: 10px 0 0 7px; width: 45px;"/>
				<hr style="border: 1px solid #2d2e2f;margin-left: 7px; width: 45px;" />
				<div class="border_3">
					<img src="img/caketb4.png" width="27px"height="25px"/>
					<p style="text-align: center; margin-top: 10px; color: #FFFFFF;font-family: '微软雅黑';">购</p>
					<p style="text-align: center; margin-top: 10px; color: #FFFFFF;font-family: '微软雅黑';">物</p>
					<p style="text-align: center; margin-top: 10px; color: #FFFFFF;font-family: '微软雅黑';">车</p>
					<div class="R_right_button">0</div>			
				<hr style="border: 1px solid #2d2e2f;margin: 8px 0 0 7px; width: 45px;" />
				<hr style="border: 1px solid #181819; margin-left: 7px; width: 45px;"/>
				</div>
				
				<div class="denglu_3">
					<p class="denglu_font">请登录</p>
					<div style="border: 1px solid red;margin:0 0 0 12px;width: 65px;display: inline-block"></div>
					<div style="border: 1px solid #CCCCCC;margin:0 0 0 -5px;width: 190px;display: inline-block"></div>
					<input type="text" name="用户名" id="name" placeholder="请输入用户名" />
					<input type="password" name="密码" id="password"  placeholder="请输入密码"/>
					<input type="button" id="button" value="登录"/>
					<p class="denglu_font1"><a href="#">免费注册></a></p>
				</div>
				<div class="border_4">
					<img src="img/caketb1.png" width="30px"height="26px"/>
					<div class="up_border_4"><p class="p_right_4"><a href="talkabout.html">留言</a></p></div>
				</div>
				<div class="border_5">
					<img src="img/caketb5.png" width="30px"height="30px"/>
					<div class="up_border_5"><img src="img/twois.jpg" width="120px"height="120px" style="margin:20px 0 0 31px;"><p class="p_right_5"><a href="#"></a>手机二维码</p></div>
				</div>
				<div class="border_6">
					<img src="img/caketb6.png" width="30px"height="27px"/>
					<div class="up_border_6"><p class="p_right_6"><a>返回顶部</a></p></div>
				</div>
			</div>
			<div class="nav">    			<!-- 导航栏-->
				<a href="eater.html"><img src="img/sweeet.jpg" ></a>
				<a href="eater.html"><span class="font_left">蛋糕</span></a>
				<a href="eater.html"><span class="font_right">甜品</span></a>
				<ul class="nav_title">
					<li id="a" style="margin-left: 505px;"><a href="#">首页</a></li>
					<li id="b"><a href="#">新品上市</a></li>
					<li id="c"><a href="hot.html">热卖产品</a></li>
					<li id="d"><a href="me.html">关于我们</a></li>
					<li id="e"><a href="talkabout1.html">联系我们</a></li>
					<li>
					<button id="shoppingcar" class="dropbtn" style="margin-top: -14px;">
						<img id="shoppingcar_left" src="img/shopping11.jpg">
						<span style="font-family: 楷体;font-weight: 600;">我的购物车 </span>
						<img id="shoppingcar_right" src="img/down.jpg" />
					</button>
					<div class="dropdown-content">						
        					<a href="#">
        						<img src="img/w.jpg" style="position: relative; width: 80px;height: 80px; left: 20px;top: 50px;"/>
        						<span style="font-family: '微软雅黑'; opacity: 0.5; position: absolute; left: 110px;top: 70px;">您的购物车里暂时没有<b>sweet!</b></span>
        					</a>
    					</div>
					</li>
				</ul>
			</div>
			<div class="playphoto">         <!--轮播-->
				<a ><img src="img/animation2.jpg" ></a>
				<a><img src="img/f.jpg" ></a>
				<a><img src="img/animation2.jpg" ></a>
				<a><img src="img/f.jpg"></a>
				<a><img src="img/animation2.jpg" ></a>			
			</div>
			<div class="people_content">    <!--content-->
				<div>
				<p class="font_up">DELICIOUS  CAKE</p>
				<p class="font_content">美味烘焙</p>
				<p class="font_down">新鲜、美味、安全</p>
				
				<p class="article"><span>
					每一道甜点或每一杯饮品，都是我们对于食材和口味的
					挑剔，坚持的程度是远远超越您所能想像的。金钱，根
					本不能用来衡量我们对这点的坚持。为了客户热爱的奶
					茶及甜点，每天"移动3181"奶茶的中央厨房都得从凌晨开始精心备料及製作甜点。
				</span></p>
			</div>
			<a href="#"><img class="lphoto" src="img/font_1.jpg"/></a>
			<a href="#"><img class="rphoto" src="img/font_2.jpg" /></a>
			<div class="people_content_next">
				<div id="left">
					<div id="left_top">
						<a href="#"><img src="img/jkl.jpg" width="200px"height="190px"></a>
						<a href="#"><p id="left_top_row1">巧克力千层蛋糕</p></a>
						<p id="left_top_row2">精选纯正原料搭配上选新鲜水果，呈现<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出独更纯正的口感。</p>
						<a href="#"><p id="left_top_row3">购买> ></p></a>
					</div>					
				</div>
				<div id="center">
					<div id="center_top">
						<a href="#"><img src="img/first.jpg" width="200px"height="190px"></a>
						<a href="#"><p id="center_top_row1">水果千层蛋糕</p></a>
						<p id="center_top_row2">精选纯正原料搭配上选新鲜水果，呈现<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出独更纯正的口感。</p>
						<a href="#"><p id="center_top_row3">购买> ></p></a>
					</div>
				     </div>
				<div id="right">
					<div id="right_top">
						<a href="#"><img src="img/wg1.jpg" width="200px"height="190px"></a>
						<a href="#"><p id="right_top_row1">芒果千层蛋糕</p></a>
						<p id="right_top_row2">精选纯正原料搭配上选新鲜水果，呈现<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出独更纯正的口感。</p>
						<a href="#"><p id="right_top_row3">购买> ></p></a>
				    </div>
				</div>
				<div class="squar">
					<div id="squar_font">
						<img src="img/fh.jpg" style="margin-left: 79px;"/>
						<table style="height: 150px;">
							<tr>
								<td>&nbsp;&nbsp;&nbsp;售前:</td>
								<td><img src="img/ff.gif" width="30px" height="30px";></td>
								<td><a href="#">汉堡包</a></td>
								<td><img src="img/ff.gif" width="30px" height="30px";></td>
								<td><a href="#">豆沙包</a></td>								
							</tr>
							
							<tr>
								<td></td>
								<td><img src="img/ff.gif" width="30px" height="30px";></td>
								<td><a href="#">奶黄包</a></td>
								<td><img src="img/ff.gif" width="30px" height="30px";></td>
								<td><a href="#">肉松包</a></td>								
							</tr>
							<tr>
								<td>&nbsp;&nbsp;&nbsp;售后:</td>
								<td><img src="img/ff.gif" width="30px" height="30px";></td>
								<td><a href="#">榴莲糕</a></td>
								<td><img src="img/ff.gif" width="30px" height="30px";></td>
								<td><a href="#">芒果糕</a></td>								
							</tr>
						</table >
						<hr  style="width: 85%; margin: 0 auto;"/>
						<p style="margin-top: 25px;">上班时间：9:00-20:00</p>
						<p>周末无休息</p>
					</div>
				</div>
			</div>
				</div>
				<div class="people_content_next_two">
					<div class="content_title">
						<p>主推单品</p>
						<p style="font-size: 30px;margin-top: -10px;">SALE</p>  		<!-- 行内元素>外部样式-->
					</div>
					<div class="content_contenting_1">
						<a href="#"><img src="img/dg9.jpg" /></a>
						<p class="font">巧克力蛋糕</p>
						<div class="underblack" style="border: 1px dashed #CCCCCC;"></div>
						<p class="font_1">优质食材，浓郁滋味</p>
						<p class="font_1_1">1、黄油软化后，加入糖粉，搅拌均匀。不需要打发。</p>
						<p class="font_1_2">2、加入1大勺鸡蛋液，搅拌均匀。</p>
						<p class="font_1_3">3、搅拌均匀，成为面团。用手把面团整形成宽约6CM，高约4CM的</p>
						<p class="font_1_4">长方体.并放入冰箱冷冻至硬</p>
						<p class="font_1_5">活动价<span style="font-size: 22px;"> ¥</span><span style="font-size: 38px;">128.00</span></p>
						<a href="#"><button class="buttons" >购买</button></a>
					</div>
					<div class="content_contenting_2">
						<a href="#"><img src="img/dg91.jpg" /></a>
						<p class="font">杏仁千层蛋糕</p>
						<div class="underblack" style="border: 1px dashed #CCCCCC;"></div>
						<p class="font_1">新鲜配送，送货上门</p>
						<p class="font_1_1">1、黄油软化后，加入糖粉，搅拌均匀。不需要打发。</p>
						<p class="font_1_2">2、加入1大勺鸡蛋液，搅拌均匀。</p>
						<p class="font_1_3">3、搅拌均匀，成为面团。用手把面团整形成宽约6CM，高约4CM的</p>
						<p class="font_1_4">长方体.并放入冰箱冷冻至硬</p>
						<p class="font_1_5">活动价<span style="font-size: 22px;"> ¥</span><span style="font-size: 38px;">58.00</span></p>
						<a href="#"><button class="buttons" >购买</button></a>
					</div>
					<div class="content_contenting_3">
						<a href="#"><img src="img/dg92.jpg" /></a>
						<p class="font">环游世界创意蛋糕</p>
						<div class="underblack" style="border: 1px dashed #CCCCCC;"></div>
						<p class="font_1">优质食材，浓郁滋味</p>
						<p class="font_1_1">1、黄油软化后，加入糖粉，搅拌均匀。不需要打发。</p>
						<p class="font_1_2">2、加入1大勺鸡蛋液，搅拌均匀。</p>
						<p class="font_1_3">3、搅拌均匀，成为面团。用手把面团整形成宽约6CM，高约4CM的</p>
						<p class="font_1_4">长方体.并放入冰箱冷冻至硬</p>
						<p class="font_1_5">活动价<span style="font-size: 22px;"> ¥</span><span style="font-size: 38px;">138.00</span></p>
						<a href="#"><button class="buttons" >购买</button></a>
					</div>	
				</div>
			
				<div class="people_content_next_three">
						<div class="photo_up">
							<table>
								<tr>
									<td>
										<div class="one">
										<button class="bt_one">满100减20</button>
										<a href="#"><img src="img/cake1.jpg" /></a>
										<a href="#"><p class="p_1">水果鲜奶生日蛋糕环游世界创意蛋同城配送速递</p></a> 
										<hr style="border: 1px dashed #8A8A8A;margin-top: 8px;" />
										<p class="p_price"><span style="font-size: 15px;">¥</span>65<span style="font-size: 15px;">.00</span></p>
										<a href="#"><button class="bt_two">立即购买</button>	</a>					 
									</div>
									</td>
									 <td>
									 	<div class="two">
									 	<button class="bt_one">满100减20</button>
									 	<a href="buy.html"><img src="img/cake2.jpg" /></a>
									 	<a href="buy.html"><p class="p_1">草莓巧克力蛋糕环游世界创意蛋同城配送速递</p></a> 
									 	<hr style="border: 1px dashed #8A8A8A;margin-top: 8px;" />
									 	<p class="p_price"><span style="font-size: 15px;">¥</span>105<span style="font-size: 15px;">.00</span></p>
									 	<a href="#"><button class="bt_two">立即购买</button></a>					 
									 </div>
									 </td>
										<td>
											<div class="three">
											<button class="bt_one">满100减20</button>
											<a href="#"><img src="img/cake3.jpg" /></a>
											<a href="#"><p class="p_1">水果千层蛋糕环游世界创意蛋同城配送速递</p></a> 
											<hr style="border: 1px dashed #8A8A8A;margin-top: 8px;" />
											<p class="p_price"><span style="font-size: 15px;">¥</span>25<span style="font-size: 15px;">.00</span></p>
											<a href="#"><button class="bt_two">立即购买</button></a>
											</div>
										</td>
											<td>
												<div class="four" >
												<button class="bt_one">满100减20</button>
												<a href="#"><img src="img/cake4.jpg" /></a>
												<a href="#"><p class="p_1">芒果千层拿破仑创意蛋糕</p></a> 
												<hr style="border: 1px dashed #8A8A8A;margin-top: 8px;" />
												<p class="p_price"><span style="font-size: 15px;">¥</span>105<span style="font-size: 15px;">.00</span></p>
												<a href="#"><button class="bt_two">立即购买</button></a>	
												</div>
											</td>
								</tr>
							</table>
						</div>
					<div class="photo_down">
						<table>
							<tr>
								<td>
									<div class="five">
									<button class="bt_one">满100减20</button>
									<a href="#"><img src="img/cake5.jpg" /></a>
									<a href="#"><p class="p_1">寿桃鲜奶生日蛋糕环游世界创意蛋同城配送</p></a> 
									<hr style="border: 1px dashed #8A8A8A;margin-top: 8px;" />
									<p class="p_price"><span style="font-size: 15px;">¥</span>125<span style="font-size: 15px;">.00</span></p>
									<a href="#"><button class="bt_two">立即购买</button></a>				 
									</div>
								</td>
								<td>
									<div class="six">
									<button class="bt_one">满100减20</button>
									<a href="#"><img src="img/cake6.jpg" /></a>
									<a href="#"><p class="p_1">咖啡巧克力蛋糕环游世界创意蛋同城配送速递</p></a> 
									<hr style="border: 1px dashed #8A8A8A;margin-top: 8px;" />
									<p class="p_price"><span style="font-size: 15px;">¥</span>18<span style="font-size: 15px;">.00</span></p>
									<a href="#"><button class="bt_two">立即购买</button></a>						 
									</div>
								</td>
								<td>
									<div class="seven">
									<button class="bt_one">满100减20</button>
									<a href="#"><img src="img/cake7.jpg" /></a>
									<a href="#"><p class="p_1">聚星之吻蓝莓蛋糕派</p></a> 
									<hr style="border: 1px dashed #8A8A8A;margin-top: 8px;" />
									<p class="p_price"><span style="font-size: 15px;">¥</span>125<span style="font-size: 15px;">.00</span></p>
									<a href="#"><button class="bt_two">立即购买</button></a>						 
									</div>
								</td>
								<td>
									<div class="eight">
									<button class="bt_one">满100减20</button>
									<a href="#"><img src="img/cake8.jpg" /></a>
									<a href="#"><p class="p_1">客鲜奶乳脂奶油巧克力蛋糕</p></a> 
									<hr style="border: 1px dashed #8A8A8A;margin-top: 8px;" />
									<p class="p_price"><span style="font-size: 15px;">¥</span>125<span style="font-size: 15px;">.00</span></p>
									<a href="#"><button class="bt_two">立即购买</button></a>						 
									</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
		
				<div class="people_bottom">
					<div class="bottom_photo">
						<table>
							<tr>
								<td>
									<div class="bottom_photo_1">
										<img src="img/bottom1.jpg" />
										<p>全心全意为您服务</p>
									</div>
								</td>
								<td>
									<div class="bottom_photo_2">
										<img src="img/bottom2.jpg" />
										<p style="color: #93989d;">原材料正宗，价格低</p>
									</div>
								</td>
								<td>
									<div class="erweima">
										<img src="img/twois.jpg" />
									</div>
								</td>
								<td>
									<div class="bottom_photo_3">
										<img src="img/bottom3.jpg" />
										<p style="color: #93989d;">公司化运作，放心购买</p>
									</div>
								</td>
								<td>
									<div class="bottom_photo_4">
										<img src="img/bottom4.jpg" />
										<p style="color: #93989d;">工作时间 9:00-22:00</p>
									</div>
								</td>
							</tr>
						</table>					
					</div>
					<hr style="border: 1px solid #181819; margin-top: 95px;" />
					<hr style="border: 1px solid #2d2e2f;" />
					<p class="copyright">©2019 网站—食品饮料 版权所有 |用手机扫描二维码可以进入本站获得扣取素材| 管理登录| 使用纯手工制作巨累</p>
				</div>
			</div>
		
	</body>

</html>
